<template>
  <view class="page_content">
    <AtTabs
      :swipeable="false"
      :current="current1"
      :tabList="tabList1"
      :onClick="handleClick"
      class='tab_box'
    >
      <!-- 油品订单 -->
      <AtTabsPane :current="current1" :index="0">
        <view class='tab-content order_content'>
          <!-- <order-list></order-list> -->
          <view class="stat_line">&nbsp;&nbsp;共 
            <text class="stat_value">{{orderTotal}}</text> 笔
            <text class="stat_value">{{orderValue}}</text> 元
          </view>
          <scroll-view scrollY="true"
            class="scroll_box"
            v-if="orderData.length"
            @scrolltolower="lower">
            <view class="order_item" v-for="(item,index) in orderData" :key="index">
              <view class="item_icon">
                <AtIcon value='file-generic' size='30' color="#5064EB"></AtIcon>
              </view>
              <view class="item_msg">
                <view class="line_2">{{item.ordersn}}</view>
                <view class="line_1">{{item.create_time}}</view>
              </view>
              <view class="item_right">
                <view class="line_1 price_line">
                  <text style="color:#333" v-if="item.pay_status == '2'">{{payment.find(x => x.id == item.payment_code).name}}</text>
                  <text style="color:#FA5B5B" v-if="item.pay_status == '1'">未支付</text>
                  ￥{{item.amount}}
                </view>
                <view class="line_1">原价：{{item.money}}</view>
                <view class="line_1">{{item.name}}</view>
              </view>
            </view>
            <AtLoadMore style="height:40px" noMoreText="没有更多了" :status="loadingStatus"/>
          </scroll-view>
        </view>
      </AtTabsPane>
      <!-- 充值订单 -->
      <AtTabsPane :current="current1" :index="1">
        <view class='tab-content order_content'>
          <!-- <order-list></order-list> -->
          <view class="stat_line">&nbsp;&nbsp;共 
            <text class="stat_value">{{voucherTotal}}</text> 笔
            <text class="stat_value">{{voucherValue}}</text> 元
          </view>
          <scroll-view scrollY="true"
            class="scroll_box"
            v-if="voucherData.length"
            @scrolltolower="lower2">
            <view class="order_item" v-for="(item,index) in voucherData" :key="index">
              <view class="item_icon">
                <AtIcon value='file-generic' size='30' color="#5064EB"></AtIcon>
              </view>
              <view class="item_msg">
                <view class="line_1_2">{{item.ordersn}}</view>
                <view class="line_1">{{item.type == 0? "会员卡":item.type == 1? "加油卡":item.type == 2? "车队卡":""}}</view>
                <view class="line_1">{{item.create_time}}</view>
              </view>
              <view class="item_right">
                <view class="line_1 price_line">
                  <text style="color:#333" v-if="item.pay_status == '2'">{{payment.find(x => x.id == item.payment_code).name}}</text>
                  <text style="color:#FA5B5B" v-if="item.pay_status == '1'">未支付</text>
                  ￥{{item.amount}}
                </view>
                <view class="line_1">赠送金额：{{item.balance}}</view>
                <view class="line_1">赠送积分：{{item.point}}</view>
              </view>
            </view>
            <AtLoadMore style="height:40px" noMoreText="没有更多了" :status="loadingStatus2"/>
          </scroll-view>
        </view>
      </AtTabsPane>
    </AtTabs>
  </view>
</template>

<script>
import Vue from 'vue'
// import OrderList from "../../order/order.vue"
import Taro from '@tarojs/taro'
import './userOrder.module.scss'
import UserAPI from '../../../api/user'
import OrderAPI from '../../../api/order'
export default {
  name: 'userOrder',
  data(){
    return{
      current1: 0,
      tabList1: [
        { title: '油品订单' },
        { title: '充值订单' }
      ],
      orderValue: "0.00", // 油品订单金额
      orderPage: 1, // 油品订单页码
      orderTotal: 0, // 油品订单总数
      orderData: [], // 油品订单数据
      orderFirst: true, // 第一次加载油品订单数据
      showLoading: false, // 上滑加载更多
      loadingStatus: "more", // 加载状态
      payment: [
        {id: "0", name: "全部"},
        {id: "wxpay", name: "微信支付"},
        {id: "unionpay", name: "银联支付"},
        {id: "card_balance", name: "加油卡支付"},
        {id: "balance", name: "余额支付"},
        {id: "cash", name: "现金支付"},
        {id: "team_balance", name: "车队卡支付"},
        {id: "family_balance", name: "家庭卡支付"},
        {id: "pos", name: "pos机支付"},
      ], // 支付方式 筛选
      voucherValue: "0.00", // 充值订单金额
      voucherPage: 1, // 充值订单页码
      voucherTotal: 0, // 充值订单总数
      voucherData: [], // 充值订单数据
      voucherFirst: true, // 充值订单第一次加载
      showLoading2: false, // 上滑加载更多 充值
      loadingStatus2: "more", // 加载状态 充值
    }
  },
  components: {
    // 'order-list': OrderList
  },
  mounted(){
    this.init();
  },
  methods:{
    init(){
      this.getOrderData();
      this.getVoucherData();
    },
    handleClick(value) {
      this.current1 = value
    },
    async getOrderData(){
      var data = {
        page: this.orderPage,
        uid: String(Taro.getStorageSync('detail_uid')),
        pay_status: "2"
      }
      if(this.orderFirst){
        data.refresh = "1"
      }
      const res = await OrderAPI.OlisOrder(data);
      const resdata = [...this.orderData,...res.data];
      this.orderData = resdata;
      this.orderTotal = res.total;
      if(res.count){
        this.orderValue = res.count.total_amount;
      }
      this.showLoading = false;
      this.orderPage ++;
      if(this.orderData.length === this.orderTotal) {
        this.loadingStatus = 'noMore'
      }else{
        this.showLoading = false;
        if(this.orderFirst){
          this.orderFirst = false;
          this.lower();
        }
      }
    },
    lower(e) { // 到底加载更多
      console.log('jiazaigengduo')
      if(!this.showLoading){
        if(this.orderTotal != this.orderData.length){
          this.showLoading = true;
          this.loadingStatus = 'loading'
          this.getOrderData();
        }
      }
    },
    async getVoucherData(){
      var data = {
        page: this.voucherPage,
        uid: String(Taro.getStorageSync('detail_uid')),
        pay_status: "2"
      }
      if(this.voucherFirst){
        data.refresh = "1"
      }
      const res = await OrderAPI.voucherList(data);
      const resdata = [...this.voucherData,...res.data];
      this.voucherData = resdata;
      this.voucherTotal = res.total;
      if(res.count){
        this.voucherValue = res.count.total_amount;
      }
      this.showLoading2 = false;
      this.voucherPage ++;
      if(this.voucherData.length === this.voucherTotal) {
        this.loadingStatus2 = 'noMore'
      }else{
        this.showLoading2 = false;
        if(this.voucherFirst){
          this.voucherFirst = false;
          this.lower2();
        }
      }
    },
    lower2(e) { // 到底加载更多
      console.log('jiazaigengduo')
      if(!this.showLoading2){
        if(this.voucherTotal != this.voucherData.length){
          this.showLoading2 = true;
          this.loadingStatus2 = 'loading'
          this.getVoucherData();
        }
      }
    },
  },
}
</script>